import React, { Component,lazy,Suspense } from 'react';
import "./App.css"

import RouterView from './router/RouterView';
import routes from './router/routeConfig'

// import { Route,Redirect,Switch } from 'react-router-dom'
//Route 用来定义路由规则

//导入组件
// import Index from './views/Index'
// import City from './views/City'
// import Login from './views/Login'
// import Detail from './views/Detail'
// import NotFound from './views/NotFound'

//使用lazy函数处理的组件 最终会单独打包到一个js文件中, 网页初次加载时只会加载需要的组件,其他组件等到访问对应的路由时才临时加载.

// var Index = lazy(()=>import('./views/Index'))
// var City = lazy(()=>import('./views/City'))
// var Login = lazy(()=>import('./views/Login'))
// var Detail = lazy(()=>import('./views/Detail'))
// var NotFound = lazy(()=>import('./views/NotFound'))

class App extends Component {
  render() {
    return (
      <div className='app'>

        {/* Route 组件本身只是用来定义路由规则, 同时也充当组件渲染出口 */}
        {/* Redirect 用来定义重定向规则 */}
        {/* Switch 只匹配第一个匹配成功的路由规则,然后放弃匹配剩余规则 */}
        {/* exact属性 , 实现精确匹配 */}

        {/* 路由的匹配逻辑: 跳路由时,会取浏览器中的地址和路由规则中的路由地址进行匹配(从上往下依次匹配), 由于有Switch的存在,当成功匹配到一个路由规则,则渲染对应的组件, 这时会放弃匹配剩余路由规则; 否则继续往下匹配其他路由规则 */}

        {/* 注意: 当某个组件内有嵌套路由规则时, 则这个组件所在的路由规则不能添加exact属性 */}
        {/* <Suspense fallback={<div className='loading'>loading...</div>}>
          <Switch>
            <Route path="/index" component={Index}></Route>
            <Route exact path="/login" component={Login}></Route>
            <Route exact path="/city" component={City}></Route>
            <Route exact path="/detail" component={Detail}></Route>
            <Redirect exact from="/" to="/index" ></Redirect>
            <Route path="*" component={NotFound}></Route>
          </Switch>
        </Suspense> */}

         {/* RouterView 根据 导入的一级路由的配置信息 渲染对应的路由规则 */}
        <RouterView routes={routes} />

        {/* <Route path="/detail/:id" component={Detail}></Route> */}
      </div>
    );
  }
}

export default App;